<script src="js/axios-0.19.0.js"></script>
<script src="js/vue.js"></script>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/common.css">

<div id="headerContainer">
    <!-- 头部 start -->
    <div class="top_banner">
        <div class="shortcut">
            <!-- 未登录状态  -->
            <div class="login_out" v-if="!isLogged">
                <a href="login.html">登录</a>
                <a href="register.html">注册</a>
            </div>
            <!-- 登录状态  -->
            <div class="login" v-else>
                <span id="welcome">欢迎您！{{user.username}}</span>
                <a href="home_index.html" class="collection" @click="goHome()">个人中心</a>
                <a href="cart.html" class="collection" >购物车</a>
                <a href="javascript:void(0);" @click="logout">退出</a>
            </div>
        </div>
    </div>
    <!-- 首页导航 -->
    <div class="navitem">
        <ul class="nav">
            <li><a href="index.html">首页</a></li>
            <li v-for="category in categories">
                <a :href=`route_list.html?cid=${category.cid}`>{{category.cname}}</a>
            </li>
            <li><a href="favorite_rank.html">收藏排行榜</a></li>
        </ul>
    </div>
</div>
<script type="text/javascript">
    new Vue({
        el: "#headerContainer",
        data: {
            //默认是没有登录
            isLogged: false,
            //用户对象
            user: {},
            //分类的集合
            categories:[]

        },
        methods:{
            //检查用户是否已经登陆
            showLoginStatus(){
                axios.get("/user/isLogged").then(resp=>{
                    var resultInfo = resp.data;
                    if(resultInfo.success){
                        //已经登陆
                        this.isLogged=true;
                        this.user =resultInfo.data;
                    }
                })
            },
            //退出登录
            logout(){
                axios.get("/user/logout").then(resp=>{
                    //根据状态码判断是否请求成功
                    if(resp.status==200){
                        location.href="/login.html";
                    }
                })
            },
            //加载类别信息
            loadNavItems(){
                axios.get("/category/findAll").then(resp=>{
                    this.categories= resp.data;
                    //this.categories = [{cid:1,cname:"周边游"},{cid:2,cname:"山水游"},...]
                })
            },
            goHome(){
                location.href=`home_index.html`;
            }

        },
        created(){
            this.showLoginStatus();
            this.loadNavItems();
        }
    })
</script>